@import "~common/css/_variables.scss";

// 歌单列表
.song_list {
  ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;

    &:after {
      content: "";
      width: 120px;
      flex: 1;
      margin: auto;
    }

    li {
      position: relative;
      border-radius: 4px;
      overflow: hidden;
      cursor: pointer;
      margin-top: 20px;
      &.item1 {
        width: 120px;
        margin-left: 20px;
      }
      &.item2 {
        width: 20px;
        max-width: 190px;
        width: calc(20% - 20px);
        margin: 0 0 20px 0;
        &:not(:nth-child(5n + 1)) {
          margin-left: 25px;
        }
      }

      .positioning,
      .recommend {
        position: relative;
        width: 100%;
        padding: 100% 0 0 0;
        background-color: #fff;
        // border: 1px solid #e5e6ea;
        box-shadow: inset 0 0 4px 0 #e5e6ea;
        overflow: hidden;
        .desc {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          padding: 10px;
          font-size: $fz12;
          color: $cfff;
          z-index: 2;
          opacity: 0;
          overflow: hidden;
          background-color: rgba($color: #000000, $alpha: 0.5);
          p {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            line-height: 1.4;
          }
        }
        .count {
          position: absolute;
          top: 0;
          right: 0;
          font-size: $fz12;
          color: #fff;
          border-radius: 2px 0 0 2px;
          padding: 2px 5px 2px 60px;
          background: url("~common/images/local_layer.png") center center / 100%
            no-repeat;
          z-index: 2;
          &::before {
            position: absolute;
            top: 0;
            left: 30px;
            content: "";
            width: 20px;
            height: 16px;
            background: url("~common/images/headset.png") center center / 14px
              no-repeat;
          }
        }
        .box {
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          .week {
            color: $c353741;
            text-align: center;
          }
          .day {
            color:$color;
            font-size: 1.2rem;
            font-weight: 500;
            margin-top: 10%;
            text-align: center;
          }
        }
      }
      .recommend:hover .desc {
        opacity: 1;
        transition: all 0.25s ease;
      }
      .recommend:hover .count {
        display: none;
      }
      .name {
        padding-top: 8px;
        line-height: 1.2;
        font-size: $fz13;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
}
